<template>
  <div class="upload">
    <MyHeader/>
    <div class="upload_title">
      <span>*</span>
      请选择章程备案的方式
    </div>
    <div class="mode">
        <RadioGroup v-model="mode">
            <Radio label="1">系统自动生成</Radio>
            <Radio label="2">上传修改后的章程／修正案</Radio>
        </RadioGroup>
    </div>
    <Collapse>
      <Panel name="1" class="upload_panel">
        <span>*</span>  
        住所证明文件
        <div class="uploadMain" slot="content">
            <div class="uploadTitle">《住所证明》页 <span>(一张)</span></div>
            <div>
                <Upload action="">
                    <div class="uploadDiv">
                        <Icon type="plus-round"></Icon>
                    </div>
                </Upload>
                <div class="clear"></div>
            </div>
            <div class="uploadTitle">北京市 丰台区权威的<span>(多张)</span></div>
            <div>
                <div class="uploadList">
                    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3074041260,3216844063&fm=26&gp=0.jpg">
                    <div class="tip">已上传</div>
                    <Icon class="del" type="close-circled"></Icon>
                </div>  
                <div class="uploadList">
                    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3074041260,3216844063&fm=26&gp=0.jpg">
                    <div class="tip">已上传</div>
                    <Icon class="del" type="close-circled"></Icon>
                </div>    
                <Upload action="">
                    <div class="uploadDiv">
                        <Icon type="plus-round"></Icon>
                    </div>
                </Upload>
                <div class="clear"></div>
            </div>
            <div class="red">请按顺序上传相关房产证明材料，具体上传说明请登录网页版进行查看</div>
        </div>
      </Panel>
      <Panel name="2" class="upload_panel">
        <span>*</span>  
        营业执照
        <div class="uploadMain" slot="content">
            <div class="uploadTitle">营业执照正本<span>(一张)</span></div>
            <div>
                <Upload action="">
                    <div class="uploadDiv">
                        <Icon type="plus-round"></Icon>
                    </div>
                </Upload>
                <div class="clear"></div>
            </div>
            <div class="uploadTitle">营业执照副本<span>(两张)</span></div>
            <div>
                <Upload action="">
                    <div class="uploadDiv">
                        <Icon type="plus-round"></Icon>
                    </div>
                </Upload>
                <div class="clear"></div>
            </div>
        </div>
      </Panel>
      <Panel name="3" class="upload_panel" v-if="mode=='2'">
        <span>*</span>  
        自定义章程
        <div class="uploadMain" slot="content">
            <div class="uploadTitle">修改的章程文件／章程修正案<span>(最多上传10张)</span></div>
            <div>
                <Upload action="">
                    <div class="uploadDiv">
                        <Icon type="plus-round"></Icon>
                    </div>
                </Upload>
                <div class="clear"></div>
            </div>
        </div>
      </Panel>
      <Panel name="4" class="upload_panel"> 
        代理机构证明文件(非必填)
        <div class="uploadMain" slot="content">
            <div>
                <Upload action="">
                    <div class="uploadDiv">
                        <Icon type="plus-round"></Icon>
                    </div>
                </Upload>
                <div class="clear"></div>
            </div>
        </div>
      </Panel>
    </Collapse>
    <div class="upload_tip">
      <p>温馨提示：</p>
      <p>全程电子化系统已经为您自动生成章程，您无需再上传。</p>
    </div>
    <div class="upload_bottom">
      <div class="bottom">
        <Button type="warning" @click="saveInfo">保存</Button>
        <Button type="primary" @click="gotoNext">下一步</Button>
      </div>
      <MyFooter/>
    </div>
  </div>
</template>

<script>
import MyHeader from "../../components/MyHeader2.vue";
import CutImage from "../../components/CutImmage.vue";
import MyFooter from "../../components/MyFooter.vue";
import request from "../../utils/request";
export default {
  data() {
    return {
      mode: "1"
    };
  },
  methods: {
    save(isNext) {
      this.$router.push({ name: "changeComAdd" });
    },
    saveInfo() {
      this.save(false);
    },
    gotoNext() {
      this.save(true);
    }
  },
  mounted() {},
  components: {
    MyHeader,
    MyFooter,
    CutImage
  }
};
</script>

<style lang="scss">
.red {color:#c00}
.upload_title {
  height: 1.75rem;
  line-height: 1.75rem;
  font-size: 0.5rem;
  color: #338ff0;
  padding-left: 0.5rem;
}
.upload_title span {
  color: #c00;
}
.mode {
    padding: 0rem 0.5rem 0.5rem 0.5rem;
    border-bottom:1px solid #bfe5f5;
    .ivu-radio-wrapper {
        font-size:0.5rem;
    }
}
.uploadMain {
    padding-bottom:0.5rem;
}
.uploadTitle {
    font-size:0.5rem;
    margin-bottom:0.3rem;
    span {
        font-size:0.42rem;
        color:#A2A2A2
    }
}
.clear {clear:both;}
.uploadDiv {border:1px solid #ccc;text-align:center;width:3.5rem;height:2.5rem;line-height:2.5rem;color:#ccc;font-size:1rem;}
.uploadList {
    border:1px solid #ccc;text-align:center;width:3.5rem;height:2.5rem;
    position:relative;
    float:left;
    margin-right:0.5rem;
    margin-bottom:0.5rem;
    img {
        width:3.5rem;height:2.5rem;
    }
    .tip {
        position: absolute;
        right:-1px;
        bottom:-1px;
        padding-left:0.2rem;
        padding-right:0.2rem;
        color:#fff;
        background:#7ED321
    }
    .del {
        position:absolute;
        top:-0.4rem;
        right:-0.4rem;
        font-size:1rem;
        color:#c00;
        background:#fff;
        text-align:center;
        border-radius: 50%;
        width:1rem;
        height:1rem;
    }
}
.upload {
  position: relative;
  min-height: 100%;
  .ivu-collapse {
    border: none;
    &-item {
      .ivu-collapse-header {
        padding-left: 0;
        height: 1.75rem;
        line-height: 1.75rem;
        font-size: 0.5rem;
        color: #338ff0;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        i {
          position: absolute;
          top: 0.57rem;
          color: #848383;
          right: 0;
          &:before {
            content: "\F123";
          }
        }
        span {
          color: #f86034;
        }
      }
    }
    &-content {
      padding: 0;
      &-box {
        padding: 0;
      }
    }
  }
  &_panel {
    padding: 0 0.54rem;
    border-bottom: 1px solid #bfe5f5;
    border-top: none !important;
    background: #fff;
  }
  &_tip {
    padding: 0.54rem;
    color: #777777;
    font-size: 0.5rem;
  }
  &_bottom {
    padding: 0.5rem;
  }
}
.bottom {
  display: flex;
  justify-content: space-around; // padding: 0.54rem;
  button {
    width: 45%;
    padding-top: 0.36rem;
    padding-bottom: 0.36rem;
    font-size: 0.57rem;
  }
}
</style>
